import React, { useState, useEffect } from 'react';
import request from "@/utils/request";
import { Image, Stepper } from 'react-vant'
import { connect } from 'react-redux'


// 分类内容区
let OrderContent = (props) => {

    const { dishesList } = props;

    const { dishesQty } = props;

    const { user } = props;

    const { addData } = props;

    const { subData } = props;

    const { getDishes } = props;

    const { setDetailVisible } = props;

    const { getDishQty } = props;

    return (
        <div className='orderContent'>
            {
                dishesList.map((item, idx) => {
                    return (
                        <div
                            className='orderList'
                            key={item.dishes_id}
                        >
                            <Image
                                width='50'
                                height='50'
                                src={item.dishes_img}
                                fit="cover"
                                onClick={() => {
                                    getDishes(item.dishes_id);
                                    getDishQty(item.dishes_id)
                                    setDetailVisible(true)
                                }}
                            />
                            <div className='dishes'>
                                <div className='dishesPrice'>
                                    <span>{item.dishes_name}</span>
                                    {
                                        item.sales_price
                                            ?
                                            <p>
                                                <del>￥{item.price}</del><span>￥{item.sales_price}</span>
                                            </p>
                                            :
                                            <p>
                                                <span>￥{item.price}</span>
                                            </p>
                                    }
                                </div>
                                <div className='addSub'>
                                    <Stepper
                                        key={item.dishes_id}
                                        value={dishesQty[idx]}

                                        theme='round'
                                        buttonSize='22'
                                        disableInput
                                        onPlus={addData.bind(null, item.dishes_id)}
                                        onMinus={subData.bind(null, item.dishes_id, dishesQty[idx])}
                                    />
                                </div>
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}
OrderContent = connect(mapStateToProps)(OrderContent)
export default OrderContent